<template>

  <div class="_wz_learningRecord" ref="learningRecord">
    <Button type="primary" @click="printTest" class="no-print" style="position: fixed;right: 20px;top: 70px;z-index: 9;">
      打印
    </Button>

    <div style="text-align: center;font-size: 24px!important;line-height: 50px!important;letter-spacing: 1px!important;font-weight: 900;">{{learningRecord.deptName}}</div>
    <div style="letter-spacing: 8px;font-size: 20px;font-weight: 700;line-height: 50px;text-align:center;color: #333;">
      培训记录表
    </div>
    <table style="font-size: 12px;" cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
        <col width="12.5%">
      </colgroup>
      <tbody>
      <tr>
        <td colspan="2" rowspan="4">
          <img :src="!!learningRecord.driverAvatar?apiUrl.imgUrl+learningRecord.driverAvatar:'../../../assets/xxwc.png'"  @error="public.imgDispose" style="width: 80%;display: block;margin: auto;"/>
        </td>
        <td>从业人员</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!learningRecord.driverName?learningRecord.driverName:'--'}}</td>
        <td>从业类型</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!learningRecord.driverTypeName?learningRecord.driverTypeName:'--'}}</td>
      </tr>
      <tr>
        <td>联系电话</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!learningRecord.driverPhone?learningRecord.driverPhone:'--'}}</td>
        <td>身份证号</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!learningRecord.driverIdentifyNum?learningRecord.driverIdentifyNum:'--'}}</td>
      </tr>
      <tr>
        <td>驾乘车辆</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!learningRecord.driverVehicleNo?learningRecord.driverVehicleNo:'--'}}</td>
        <td>培训月份</td>
        <td style="color:#2d8cf0;" colspan="2">{{!!learningRecord.trainCourseStudentPlanCreateDate?learningRecord.trainCourseStudentPlanCreateDate:'--'}}</td>
      </tr>
      <tr>
        <td>运输企业</td>
        <td style="color:#2d8cf0;" colspan="5">{{!!learningRecord.deptName?learningRecord.deptName:'--'}}</td>
      </tr>
      <tr>
        <td colspan="2">培训课程</td>
        <td>培训周期</td>
        <td>培训类型</td>
        <td>培训方向</td>
        <td>培训情况</td>
        <td>培训时长</td>
        <td>随堂测验</td>
      </tr>
      <tr>
        <td style="color:#2d8cf0;" colspan="2">
          {{!!learningRecord.trainCourseStudentPlanName?learningRecord.trainCourseStudentPlanName:'--'}}
        </td>
        <td style="color:#2d8cf0;">
          {{!!learningRecord.trainCourseStudentPlanCreateDate?learningRecord.trainCourseStudentPlanCreateDate:'--'}}
        </td>
        <td style="color:#2d8cf0;">
          {{!!learningRecord.trainCourseStudentPlanTypeName?learningRecord.trainCourseStudentPlanTypeName:'--'}}
        </td>
        <td style="color:#2d8cf0;">
          {{!!learningRecord.trainCourseStudentPlanDirectionName?learningRecord.trainCourseStudentPlanDirectionName:'--'}}
        </td>
        <td style="color:#2d8cf0;">
          <template v-if="learningRecord.trainCourseStudentPlanFinish == 0">未开始</template>
          <template v-if="learningRecord.trainCourseStudentPlanFinish == 1">已完成</template>
          <template v-if="learningRecord.trainCourseStudentPlanFinish == 2">进行中</template>
        </td>
        <td style="color:#2d8cf0;">
          {{learningRecord.trainCourseStudentPlanLearnDuration + '/' + learningRecord.trainCourseStudentPlanTotalDuration}}分
        </td>
        <td style="color:#2d8cf0;">
          <template v-if="learningRecord.trainCourseStudentPlanExam == 0">未发布</template>
          <template v-if="learningRecord.trainCourseStudentPlanExam == 1">
            <template v-if="learningRecord.trainCourseStudentPlanExamState == 0">未考试</template>
            <template v-if="learningRecord.trainCourseStudentPlanExamState == 1">及格</template>
            <template v-if="learningRecord.trainCourseStudentPlanExamState == 2">不及格</template>
          </template>
        </td>

      </tr>
<!--      <tr>-->
<!--        <td>课题数</td>-->
<!--        <td colspan="2">学习时长</td>-->
<!--        <td>完成数</td>-->
<!--        <td colspan="2">开始日期</td>-->
<!--        <td colspan="2">结束日期</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td style="color:#2d8cf0;">-->
<!--          {{!!learningRecord.trainCourseStudentPlanMaterialNumber?learningRecord.trainCourseStudentPlanMaterialNumber:'&#45;&#45;'}}-->
<!--        </td>-->
<!--        <td style="color:#2d8cf0;" colspan="2">-->
<!--          {{!!learningRecord.trainCourseStudentPlanLearnDuration?learningRecord.trainCourseStudentPlanLearnDuration:'&#45;&#45;'}}-->
<!--        </td>-->
<!--        <td style="color:#2d8cf0;">-->
<!--          {{!!learningRecord.trainCourseStudentPlanFinishedNumber?learningRecord.trainCourseStudentPlanFinishedNumber:0}}-->
<!--        </td>-->
<!--        <td style="color:#2d8cf0;" colspan="2">-->
<!--          {{!!learningRecord.trainCourseStudentPlanBeginDate?learningRecord.trainCourseStudentPlanBeginDate:'&#45;&#45;'}}-->
<!--        </td>-->
<!--        <td style="color:#2d8cf0;" colspan="2">-->
<!--          {{!!learningRecord.trainCourseStudentPlanEndDate?learningRecord.trainCourseStudentPlanEndDate:'&#45;&#45;'}}-->
<!--        </td>-->
<!--      </tr>-->




<!--      <tr>-->
<!--        <td>从业人员</td>-->
<!--        <td style="color:#2d8cf0;">{{!!learningRecord.driverName?learningRecord.driverName:'&#45;&#45;'}}</td>-->
<!--        <td>身份证号</td>-->
<!--        <td style="color:#2d8cf0;">{{!!learningRecord.driverIdentifyNum?learningRecord.driverIdentifyNum:'&#45;&#45;'}}</td>-->
<!--        <td>从业类型</td>-->
<!--        <td style="color:#2d8cf0;">{{!!learningRecord.driverTypeName?learningRecord.driverTypeName:'&#45;&#45;'}}</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td>培训方向</td>-->
<!--        <td style="color:#2d8cf0;">-->
<!--          {{!!learningRecord.trainCourseStudentPlanDirectionName?learningRecord.trainCourseStudentPlanDirectionName:'&#45;&#45;'}}-->
<!--        </td>-->
<!--        <td>培训类型</td>-->
<!--        <td style="color:#2d8cf0;">-->
<!--          {{!!learningRecord.trainCourseStudentPlanTypeName?learningRecord.trainCourseStudentPlanTypeName:'&#45;&#45;'}}-->
<!--        </td>-->
<!--        <td>驾乘车辆</td>-->
<!--        <td style="color:#2d8cf0;">-->
<!--          {{!!learningRecord.driverVehicleNo?learningRecord.driverVehicleNo:'&#45;&#45;'}}-->
<!--        </td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td>培训课程</td>-->
<!--        <td style="color:#2d8cf0;">-->
<!--          {{!!learningRecord.trainCourseStudentPlanName?learningRecord.trainCourseStudentPlanName:'&#45;&#45;'}}-->
<!--        </td>-->
<!--        <td>累计完成学时</td>-->
<!--        <td style="color:#2d8cf0;">-->
<!--          {{!!learningRecord.trainCourseStudentPlanLearnDuration?learningRecord.trainCourseStudentPlanLearnDuration:'&#45;&#45;'}} 分-->
<!--        </td>-->
<!--        <td>运输企业</td>-->
<!--        <td style="color:#2d8cf0;">-->
<!--          {{!!learningRecord.deptName?learningRecord.deptName:'&#45;&#45;'}}-->
<!--        </td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td>学习开始日期</td>-->
<!--        <td colspan="2" style="color:#2d8cf0;">-->
<!--          {{!!learningRecord.trainCourseStudentPlanBeginDate?learningRecord.trainCourseStudentPlanBeginDate:'&#45;&#45;'}}-->
<!--        </td>-->
<!--        <td>学习结束日期</td>-->
<!--        <td colspan="2" style="color:#2d8cf0;">-->
<!--          {{!!learningRecord.trainCourseStudentPlanEndDate?learningRecord.trainCourseStudentPlanEndDate:'&#45;&#45;'}}-->
<!--        </td>-->
<!--      </tr>-->
      <tr>
        <td style="text-align: center;">序号</td>
        <td style="text-align: center;" colspan="3">课件名称</td>
        <td colspan="2" style="text-align: center;">培训开始时间</td>
        <td colspan="2" style="text-align: center;">培训结束时间</td>
      </tr>
      <template v-for="item,index in learningRecord.trainCourseStudentPlanTaskList">
        <tr>
          <td rowspan="2" style="color:#2d8cf0;text-align: center;">{{index+1}}</td>
          <td style="color:#2d8cf0;text-align: center;" colspan="3">{{!!item.materialTrainName?item.materialTrainName:'--'}}</td>
          <td colspan="2" style="color:#2d8cf0;text-align: center;">
            {{!!item.trainCourseStudentPlanTaskBeginTime?item.trainCourseStudentPlanTaskBeginTime:'--'}}
          </td>
          <td colspan="2" style="color:#2d8cf0;text-align: center;">
            {{!!item.trainCourseStudentPlanTaskEndTime?item.trainCourseStudentPlanTaskEndTime:'--'}}
          </td>
        </tr>
        <tr>
          <td colspan="7">
            <div v-if="!!item.trainCourseStudentRecordImgList && item.trainCourseStudentRecordImgList.length > 0">
              <div class="demo-upload-list" v-for="items in item.trainCourseStudentRecordImgList">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="apiUrl.imgUrl+items.imgUrl" @error="public.imgDispose" />
                </viewer>
              </div>
              <h6 style="clear: both;"></h6>
            </div>
            <div v-else>暂无培训证据</div>
          </td>
        </tr>
      </template>
      </tbody>
    </table>

    <grade :selectData="examStudentPlan" v-if="!!examStudentPlan" :printStatus="true"></grade>

    <Spin size="large" fix v-if="spinShow"></Spin>


  </div>
</template>
<script>
  import grade from './grade.vue'
  import wzTbale from "../../../components/table/table";

  export default {
    components: {
      grade,//试题
    },
    props: ['selectData'],
    data() {
      return {
        spinShow:false,//本页加载
        learningRecord: {},
        examStudentPlan: null,
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      //
      let that = this;
      that.spinShow = true;
      that.axios.post(that.apiUrl.webApi + "/educate/trainPlan/trainCourseStudentPlanInfo", {uuid: that.selectData.uuid}).then(res => {
        that.spinShow = false;
        if (!!res) {
          that.learningRecord = res.data.data;
          if(!!res.data.data.examStudentPlan){
            //考试
            var imgList = [];
            !!res.data.data.examStudentPlan.examStudentFirstImg ? imgList.push(res.data.data.examStudentPlan.examStudentFirstImg) : "";
            !!res.data.data.examStudentPlan.examStudentSecondImg ? imgList.push(res.data.data.examStudentPlan.examStudentSecondImg) : "";
            !!res.data.data.examStudentPlan.examStudentThirdImg ? imgList.push(res.data.data.examStudentPlan.examStudentThirdImg) : "";
            res.data.data.examStudentPlan.imgList = imgList;

          }
          that.examStudentPlan = res.data.data.examStudentPlan;
        }
      }).catch(err => {
        console.log('失败', err);
      })
    },
    methods: {//执行的方法
      printTest() {
        this.$print(this.$refs.learningRecord) // 使用
      }
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>

<style lang="less">
  ._wz_learningRecord {
    position: relative;
    max-width: 1024px;
    margin: auto;

    table {
      border-top: 1px solid #515a6e;
      border-left: 1px solid #515a6e;
      width: 100%;

      td {
        min-width: 0;
        height: 40px;
        box-sizing: border-box;
        text-align: left;
        text-overflow: ellipsis;
        border-right: 1px solid #515a6e;
        border-bottom: 1px solid #515a6e;
        padding-left: 12px;
        padding-right: 12px;
      }
    }


    .demo-upload-list {
      float: left;
      margin: 10px;
      display: block;
      width: 100px;
      height: 132px;
      text-align: center;
      line-height: 60px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

      img {
        width: 100%;
        height: 100%;
      }
    }
  }


</style>
